import { BtMessage } from "./utils/BtMessage.js";
import { courseHotList, courseRecommendList } from './api/index.js'

$(document).ready(() => {

    loadHomeCourse()
    
})

const loadHomeCourse = () => {
    // 异步加载
    courseHotList().then(res => {
        if (res.code == 200) {
            const item = $("#m-c-hot")

            item.html("")
            res.data.forEach(course => {
                item.append(getCourseTemplate(course))
            })
        }else {
            BtMessage({
                type: 'error',
                message: res.msg || '获取课程信息失败!'
            })
        }
    })
    courseRecommendList("java").then(res => {
        console.log("res", res)
        if (res.code == 200) {
            const item = $("#m-c-java")

            item.html("")
            res.data.forEach(course => {
                item.append(getCourseTemplate(course, "col-sm-6 col-md-4 my-2 px-1"))
            })
        }else {
            BtMessage({
                type: 'error',
                message: res.msg || '获取课程信息1失败!'
            })
        }
    })
    courseRecommendList("ict").then(res => {
        if (res.code == 200) {
            const item = $("#m-c-ict")

            item.html("")
            res.data.forEach(course => {
                item.append(getCourseTemplate(course, "col-sm-6 col-md-4 my-2 px-1"))
            })
        }else {
            BtMessage({
                type: 'error',
                message: res.msg || '获取课程信息2失败!'
            })
        }
    })
}

const getCourseTemplate = (course, param) => {
    return `
    <div class="${ param || 'col-6 col-md-4 col-lg-3 my-2 px-1' }">
        <a href="/course/detail.html?id=${ course.id }" target="_blank" class="course">
            <img src="${ course.img }" alt="" srcset="" />
            <div class="content">
                <span>${ course.name }</span>
                <div class="d-flex justify-content-end">
                    <span class="badge badge-primary mr-1 ${ !course.recommend ? 'd-none' : '' }">精品</span>
                    <span class="badge badge-success ${ !course.certifie ? 'd-none' : '' }">认证课程</span>
                </div>
            </div>
        </a>
    </div>`
}